<template>
  <div id="container2" class="container2"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data(){
    return{

    }
  },
  mounted() {
    let list = [
      {project: 45,question: 32,count: 122,name: '张三'},
      {project: 8,question: 65,count: 83,name: '张三'},
      {project: 25,question: 78,count: 238,name: '张三'},
      {project: 78,question: 90,count: 189,name: '张三'},
      {project: 92,question: 32,count: 12,name: '张三'},
      {project: 24,question: 83,count: 84,name: '张三'},
      {project: 62,question: 34,count: 155,name: '张三'},
      {project: 41,question: 54,count: 122,name: '张三'},
      {project: 81,question: 23,count: 218,name: '张三'},
      {project: 14,question: 79,count: 203,name: '张三'},
    ]
    let data = list.map(e => {
      return [e.project,e.question,e.count,e.name]
    })
    console.log(data)
    this.initEcharts(data)
  },
  methods:{
    initEcharts(data){
      const schema = [
        { name: 'project', index: 0, text: '项目数量' },
        { name: 'question', index: 1, text: '问题数量' },
        { name: 'count', index: 2, text: '涉及金额' },
        { name: 'creator', index: 3, text: '审计人' },
      ];
      const itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.3)'
      };

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('container2'));
      let option = {
        color: ['#16a9c5'],
        grid: {
          left: '15%',
          right: '20%',
          top: '15%',
          bottom: '18%'
        },
        tooltip: {
          backgroundColor: '#ffffff',
          formatter: function (param) {
            let value = param.value;
            return schema[3].text + '：' + value[3] + '<br>'
                + schema[0].text + '：' + value[0] + '<br>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[2] + '万元'
          }
        },
        xAxis: {
          type: 'value',
          name: '项目数量',
          nameGap: 16,
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            show: false
          },
          axisLabel: {textStyle: {color: '#ffffff'}},
          axisLine: {lineStyle: {color: '#ffffff'}}
        },
        yAxis: {
          type: 'value',
          name: '问题数量',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            show: true,
            lineStyle:{
              type:'dashed'
            }
          },
          axisLabel: {textStyle: {color: '#ffffff'}},
          axisLine: {lineStyle: {color: '#ffffff'}}
        },
        visualMap: [
          {
            left: 'right',
            top: '10%',
            dimension: 2,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ['涉及金额'],
            textGap: 30,
            inRange: {
              symbolSize: [10, 70]
            },
            textStyle: {
              color: '#ffffff' // 设置字体颜色为白色
            },
            controller: {
              inRange: {
                color: ['#87c3d1','#16a9c5']
              },
            }
          },
          {
            show: false,
            left: 'right',
            bottom: '5%',
            dimension: 2,
            min: 0,
            max: 250,
            itemHeight: 120,
            textGap: 30,
            inRange: {
              colorLightness: [0.9, 0.5]
            },
          }
        ],
        series: [
          {
            type: 'scatter',
            itemStyle: itemStyle,
            data
          },
        ]
      };
      myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.container2{
  width: 100%;
  height: calc(100% - 36px);
}
</style>